<template>
  <div class="dashboard-editor-container">
    <div style="position: relative; z-index: 2;">
      <el-row style="padding:16px 16px 0;margin-bottom:32px; " />

      <panel-group :data="homeInfo" @handleSetLineChartData="handleSetLineChartData" />
      <el-form v-if="permission">
        <el-form-item class="treeSelect" label="" prop="deptIds" label-width="0">
          <tree-select
            v-model="searchkey"
            :multiple="true"
            :flat="true"
            :default-expand-level="1"
            :options="departmentAllListData"
            :normalizer="treeSelectProps"
            placeholder="选择部门"
            :limit="2"
            style="width: 350px; background:#f0f2f5;"
            @close="searchfun"
          />
        </el-form-item>
      </el-form>
      <echarts v-if="permission" :chart-data="chartData" />

      <!--<el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <raddar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </el-col>
      </el-row>-->
    </div>
    <div style="position: absolute;right: 10px; bottom: 10px; z-index: 1;">
      <img :style="`width: ${this.picWidth}px;`" src="../assets/logo/logo1.png">
    </div>
  </div>
</template>

<script>
import { getHomeInfoAPI, getSalaryAndInvoiceAPI } from '@/api/home'
import commonMixins from '@/mixins/common'
import TreeSelect from '@riophae/vue-treeselect'
import treeAllListData from '@/mixins/treeAllListData'
import echarts from './components/statisticalChart'
import LineChart from './dashboard/LineChart'
import PanelGroup from './dashboard/PanelGroup'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    echarts,
    TreeSelect,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  mixins: [commonMixins, treeAllListData],
  data() {
    return {
      picWidth: 300,
      lineChartData: lineChartData.newVisitis,
      homeInfo: {},
      chartData: {},
      permission: false,
      searchkey: [],
      departmentAllListData: [],
      treeSelectProps(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children
          // isDefaultExpanded: true
        }
      }
    }
  },
  mounted() {
    this.initData()

    // 图片手机端适配
    if (window.innerWidth < 600) {
      this.picWidth = 120
    } else if (window.innerWidth < 1280) {
      this.picWidth = 220
    }

    window.onresize = () => {
      if (window.innerWidth < 600) {
        this.picWidth = 120
      } else if (window.innerWidth < 1280) {
        this.picWidth = 220
      }
    }
  },
  methods: {
    searchfun() {
      this.getSalaryAndInvoice()
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    async getHomeInfoData() { // 获取列表数据
      try {
        const response = await getHomeInfoAPI({})
        const result = response
        if (+result.code === 200) {
          this.homeInfo = result.data || {}
          this.homeInfo.show = true
        } else {
          this.$notify.error({
            title: '错误',
            message: result.msg || '获取失败！'
          })
        }
      } catch (error) {
        // console.log(error)
        this.$notify.error({
          title: '错误',
          message: error.message || '获取失败!'
        })
      }
    },
    async getSalaryAndInvoice() { // 获取列表数据
      const params = this.searchkey.join(',')
      try {
        const response = await getSalaryAndInvoiceAPI({ deptIds: params })
        const result = response
        if (+result.code === 200) {
          this.chartData = result.data || {}
          this.permission = result.data.permission
        } else {
          this.$notify.error({
            title: '错误',
            message: result.msg || '获取失败！'
          })
        }
      } catch (error) {
        // console.log(error)
        this.$notify.error({
          title: '错误',
          message: error.message || '获取失败!'
        })
      }
    },
    async initData() { // 初始化数据
      this.getHomeInfoData()
      this.getDepartmentAllListData()
      this.getSalaryAndInvoice()
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    overflow: auto;
    padding: 0 32px 32px 32px;
    background-color: rgb(240, 242, 245);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .treeSelect {
    & /deep/ .vue-treeselect__multi-value {
      line-height: 20px;

    }
    & /deep/ .vue-treeselect__control{
      background: none !important;
    }
  }

</style>
